﻿@charset "utf-8";

/*当浏览器尺寸小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	/*avi*/
	.avi{
		width:100%;
		height:auto;
		margin-top:20px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.avi li{width:48%; height:auto; margin-bottom:15px; border: 1px solid #dedede; border-radius:5px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	.avi li span{display:block; width:100%; height:auto; overflow:hidden; position:relative;}
	.avi li span img{width:100%; height:auto;}
	.avi li span em{ position:absolute; left:50%; top:50%; width:50px; height:30px; z-index:9; margin-top:-15px; margin-left:-25px; background:url(play.png) no-repeat; transition: 0.5s all ease}
	.avi li:hover em{ margin-top:-25px;}
	.avi li p{ width:95%; height:40px; line-height:40px; margin:0 auto; text-align: center; font-size:14px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.avi li a{ display:block}
	
	.avi_play{ width:100%; height:auto; margin:0 auto; margin-top:20px; }
	
	/*标题专用*/
	.default_title{ width:90%; height:auto; margin:0 auto; font-size:0.25rem; font-weight:500; text-align:center; color:#333; padding:40px 0 70px 0; position:relative}
	.default_title span{ display:block; font-size:0.14rem; color:#999; margin-top:10px}
	.default_title:before{content: ""; width:300px; height:15px; margin:0 auto; background:url(../images/default_title.png) no-repeat; position:absolute; left:0; right:0; bottom:0.36rem; }
}

/*当浏览器尺寸大于992px时候*/
@media screen and (min-width:992px){
	/*avi*/
	.avi{
		width:100%;
		height:auto;
		margin-top:40px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.avi li{width:24%; height:auto; margin-bottom:15px; border: 1px solid #dedede; border-radius:5px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	.avi li span{display:block; width:100%; height:auto; overflow:hidden; position:relative;}
	.avi li span img{width:100%; height:auto;}
	.avi li span em{ position:absolute; left:50%; top:50%; width:50px; height:30px; z-index:9; margin-top:-15px; margin-left:-25px; background:url(play.png) no-repeat; transition: 0.5s all ease}
	.avi li:hover em{ margin-top:-25px;}
	.avi li p{ width:95%; height:40px; line-height:40px; margin:0 auto; text-align: center; font-size:14px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.avi li a{ display:block}
	
	.avi_play{ width:500px; height:auto; margin:0 auto; margin-top:26px; }
	/*avi_end*/
	
	/*标题专用*/
	.default_title{ width:90%; height:auto; margin:0 auto; font-size:30px; font-weight:500; text-align:center; color:#333; padding:40px 0 70px 0; position:relative}
	.default_title span{ display:block; font-size:16px; color:#999; margin-top:10px}
	.default_title:before{content: ""; width:300px; height:15px; margin:0 auto; background:url(../images/default_title.png) no-repeat; position:absolute; left:0; right:0; bottom:36px; }
	
}